import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import {Actions} from 'react-native-router-flux';
import api from '../../common/api';
import CommonStyles from '../../common/styles';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

export default class ForumScreen extends React.Component {
  state = {
    loading: false,
    taxonomies: [],
  }

  componentDidMount() {
    this.setState({
      loading: true,
    }, () => {
      this.fetchForumtaxonomies();
    })
    
  }

  fetchForumtaxonomies() {
    try {
      api.listForumtaxonomy().then(response => {
        console.log(response);
        if (response.ret == 0) {
          this.setState({taxonomies: response.data.list});
        }
        
      });
    } catch (error) {
      console.error(error);
    }
  }

  gotoForumList = (item) => {
    Actions.ForumList({"router_params": {"come_from": "直接来自论坛页", "taxonomy": item}});
  }

  renderForumtaxonomies() {
    let results = [];
    this.state.taxonomies.map((item, i) => {
      results.push(
        <TouchableOpacity key={item.key} style={styles.forumtaxonomyItem} onPress={() => {this.gotoForumList(item)}}>
          <Icon name={item.icon} size={30}/>
          <Text>{item.name}</Text>
        </TouchableOpacity>
      )
    })
    return results;
  }

  gotoTopicScreen(item) {
    Actions.TopicScreen({"router_params": {"come_from": "直接来自论坛页", "forum": item}, "title": "直接来自版块列表"});
  }

  render() {
    let Taxonomies = this.renderForumtaxonomies();
    return (
      <View style={CommonStyles.container}>
        <View style={styles.forumtaxonomyWrap}>
          {Taxonomies}
        </View>
        <View style={{backgroundColor: "#ddd", marginTop: 10, marginBottom: 10, height: 1}}></View>
        <View style={styles.sectionTitleWrap}>
          <View style={styles.sectionTitleDivider}></View>
          <Text style={styles.sectionTitle}>常去的版块</Text>
        </View>
        <View style={styles.myForumsWrap}>
          <TouchableOpacity onPress={() => this.gotoTopicScreen()} style={styles.myForumItem}><Text>任我行</Text></TouchableOpacity>
          <TouchableOpacity onPress={() => this.gotoTopicScreen()} style={styles.myForumItem}><Text>吸星大法</Text></TouchableOpacity>
          <TouchableOpacity onPress={() => this.gotoTopicScreen()} style={styles.myForumItem}><Text>乾坤大挪移</Text></TouchableOpacity>
          <TouchableOpacity onPress={() => this.gotoTopicScreen()} style={styles.myForumItem}><Text>蓝凤凰</Text></TouchableOpacity>
          <TouchableOpacity onPress={() => this.gotoTopicScreen()} style={styles.myForumItem}><Text>国际大酒店</Text></TouchableOpacity>
          <TouchableOpacity onPress={() => this.gotoTopicScreen()} style={styles.myForumItem}><Text>天外飞仙</Text></TouchableOpacity>
        </View>
        
      </View>
    )
  }
}

const styles = StyleSheet.create({
  forumtaxonomyWrap: {
    display: "flex",
    flexDirection: "row",
    marginTop: 20
  },
  forumtaxonomyItem: {
    flexGrow: 1,
    alignItems: "center"
  },
  myForumsWrap: {
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap"
  },
  myForumItem: {
    backgroundColor: "#eee",
    padding: 10,
    marginRight: 5,
    marginTop: 5
  },
  sectionTitleWrap: {
    display: "flex",
    flexDirection: "row",
    marginBottom: 5
  },
  sectionTitleDivider: {
    height: 18,
    backgroundColor: "blue",
    width: 4,
    marginRight: 6
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: "bold"
  }
})
